<template>
  <div>
      <h3>动态组件&&异步组件</h3>
      <h3>为何用keep-alive：包含两个组件，当组件切换之后，在b组件里面有个点击事件，点击之后再切换a组件，再点击b组件，那么他内容应是缓存起来</h3>
       <component :is="currentView"></component>
    <!-- 
      非活动组件将被缓存 上面的点击切换并不会缓存加上 keep-alive
    使用就是把需要缓存的包裹在keep-alive中
    -->
    <!-- <keep-alive>
      <component :is="currentView" keep-alive></component>
    </keep-alive> -->
    <button @click="zujianA">组件切换为a</button>
    <button @click="zujianB">组件切换为b</button>
  </div>
</template>

<script>
// 引入组件
import zujianA from "views/zujian/zujianA";
import zujianB from "views/zujian/zujianB";

export default {
  data() {
    return {
      currentView: zujianA //component是动态组件，指向组件A也就是zujianA
    };
  },
  components: {
    zujianA,
    zujianB
  },
  methods: {
    // 点击a按钮，组件切换为a
    zujianA() {
      this.currentView = zujianA;
    },
    zujianB() {
      this.currentView = zujianB;
    }
  }
}
</script>

<style>

</style>